// webpack 是node写出来的 node的写法
// 加载css文件 - 1
let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    devServer: { // 开发服务的配置
        port: 3000,
        progress: true,  // 打包是出现进度条
        contentBase: './build',
        compress: true
    },
    mode: 'development', // 模式 默认两种 production(生产模式) development(开发模式)
    entry: './src/index.js', // 入口
    output: {
        filename: 'bundle.[hash:8].js', // 打包后的文件名
        path: path.resolve(__dirname,'dist')// 路径必须是一个绝对路径
    },
    plugins: [ // 数组 放着所有的webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html',// 打包前的文件路径及文件名
            filename: 'index.html',  // 打包后的文件名
            minify: { // html打包好压缩
                removeAttributeQuotes: true, // 删除html文件的双引号
                collapseWhitespace: true // 打包成一行代码
            },
            hash: true // 给引用的文件加一个hash戳，如src='bundle.js?6272952884537966770b'
        })
    ],
    module: { // 模块
        rules: [ // 规则
            // css-loader 接受@import这种语法的，style-loader 它是把css 插入到head的标签中的，loader的特点 希望单一
            // loader的用法 字符串只用一个loader
            // 多个loader需要 [] {test: /\.css$/, use: ['style-loader','css-loader']}
            // loader 的顺序 默认是从右向左执行 从下往上执行
            // loader 还可以写成 对象的方式
            // 如 {test: /\.css$/, use: [{loader: 'style-loader'},'css-loader']}
            // 还可以处理less文件
            {
                // 可处理css文件
                test: /\.css$/, 
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top' // css文件插入的上面
                        }
                    },
                    'css-loader'
                ]
            },
            {
                //可处理less文件 要安装(less,less-loader) 其它的类似如sass(node-sass,sass-loader),stylus(stylus,stylus-loader)
                test: /\.less$/, 
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertAt: 'top' // css文件插入的上面
                        }
                    },
                    'css-loader', // @import  解析路径
                    'less-loader' // 把less -> css
                ]
            }
        ]
    }
}